<template>
	<view>
		<!-- 搜索框 -->
        <u-sticky bg-color="var(--mainColor)" h5-nav-height="0" @fixed="isFixed=true"  @unfixed="isFixed=false">
			<view class="flex align-center u-p-x-30 main-bg-color" style="height: 88rpx;">
				<view class="flex align-center flex-column u-m-r-30" style="width: 100rpx;" @click="toMap">
					<image src="/static/index/dizhi.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<view class="font-20 font-weight-bold text-center text-ellipsis" style="color:#fff;width: 100rpx;">
						{{ addressName }}</view>
				</view>
				<view class="u-p-x-30 u-p-y-20" style="flex: 1;">
            		<u-search :showAction="false" disabled @click="tosearchPage"></u-search>
         	 	</view>
			</view>
        </u-sticky>
		<!-- 滚动区域 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:bottombar="false">
			<view style="width:100%; background-color: #fff">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item,index) in merchCategoryList.slice(0,10)" :key="index" @click="toSearchPage(item.id)">
						<image :src="item.image" style="width: 90rpx;height: 90rpx;" mode="aspectFill"></image>
						<text class="mt-1 text-center text-ellipsis" style="width: 100rpx;">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="u-p-t-20 u-p-x-20 flex flex-wrap ">
				<view class="u-p-20 rounded-20 flex-1" v-for="(item,index) in merchList" :key="index">
					<dy-supplier-item :item="item"></dy-supplier-item>
				</view>
			</view>
		</mescroll-body>
    <u-tabbar v-model="tabbarCurrent" :list="list" @change="tabbarChange" active-color="#fe582b" inactive-color="#999999"></u-tabbar>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import amap from '@/common/map/amap-wx.130.js';
	import {
		SupplierCenterApi
	} from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用 mixin
		data() {
			return {
        list: [{
					iconPath: "/static/tabbar/supplier.png",
					selectedIconPath: "/static/tabbar/supplier-active.png",
					text: '商圈',
            		pagePath: "/pages/tabbar/supplier/supplier"
				},
				{
					iconPath: "/static/tabbar/mine.png",
					selectedIconPath: "/static/tabbar/mine-active.png",
					text: '我的',
            		pagePath: "/pages/supplierPage/supplierMine/supplierMine"
				},
				{
					iconPath: "/static/supplier/tabbar/shopfh.png",
					selectedIconPath: "/static/supplier/tabbar/shopfh.png",
					text: '返回商城',
            		pagePath: "/pages/tabbar/index/index"
				},
				],
				tabbarCurrent: 0,
				// 商户分类列表
				merchCategoryList: [],
				// 商户列表
				merchList: [],
				mapData: {},
				addressName: "",
				formData: {
					category_id: -1,
					name: "",
				},
        		isFixed: false
			};
		},
		computed: {},
		onLoad() {
			uni.$on('changeLocation', (location) => {
				console.log('sssssssssssss', location);
				this.mapData = {
					lat: location.latitude,
					lng: location.longitude
				}
				this.addressName = location.name
			})
		}, 
		methods: {
			// 搜索页面
			toSearchPage(id=-1) {
				uni.navigateTo({
					url: '/pages/supplierPage/supplierSearch/supplierSearch?' + `id=${id}`
				})
			},
      		tabbarChange(e){
				if(e==this.current) return
				uni.redirectTo({
					url: this.list[e].pagePath
				})
			},
			// 切换菜单
			change(index) {
				if (this.current == index) return
				this.current = index
				this.formData.category_id = this.merchCategoryList[index].id
				this.mescroll.resetUpScroll()
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				this.getAddress(page)
			},
			// 商户分类
			getMerchCategoryList(page) {
				SupplierCenterApi.getMerchCategoryList({
					type: 2
				}).then(res => {
					console.log('商户分类', res);
					if (res.code == 1) {
						if (res.data.data.length) {
							this.merchCategoryList = res.data.data
						}
						this.getMerchOfflineMerchList(page)
					}
				})
			},
			// 获取商户列表
			getMerchOfflineMerchList(page) {
				this.formData.page = page.num
				console.log('查询参数', this.formData);
				SupplierCenterApi.getMerchOfflineMerchList({
					...this.formData,
					...this.mapData
				}).then(res => {
					console.log('获取商户列表', res);
					if (res.code == 1) {
						res.data.forEach(item => {
							item.merch_id = item.id
						})
						if (page.num == 1) this.merchList = []; //如果是第一页需手动制空列表
						this.merchList = this.merchList.concat(res.data); //追加新数据
						this.mescroll.endByPage(res.data.length, res.totalpage)
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 获取当前定位
			getAddress(page) {
				var that = this;
				const myAmapFun = new amap.AMapWX({
          		key: '2d7598b3c967379ffd30b5ac841e6cbe'
				});
				uni.showLoading({
					title: '获取信息中'
				});
				
				// #ifdef H5
				   console.log('H5');
				   // H5端测试可以使用http，上线打包需要设置为https模式 ，在manifest里面修改
                   // 谷歌浏览器可能会获取不到任何信息，因为谷歌浏览器位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败
					uni.getLocation({
						type: 'wgs84',
						isHighAccuracy:true,
						success: function(res) {
							console.log('获取当前位置经纬度',res)
							that.mapData = {
								lat: res.latitude,
								lng: res.longitude
							}
							if (that.merchCategoryList.length > 0) {
								that.getMerchOfflineMerchList(page)
							} else {
								that.getMerchCategoryList(page)
							}
							uni.hideLoading();
						},
					})
				// #endif
				
				// #ifdef APP-PLUS
				        console.log('app');
						uni.getLocation({
							type: 'gcj02',
							geocode: true, //设置该参数为true可直接获取经纬度及城市信息
							success: function(res) {
								console.log('获取当前位置经纬度',res)
								that.addressName = res.address.poiName
								that.mapData = {
									lat: res.latitude,
									lng: res.longitude
								}
								if (that.merchCategoryList.length > 0) {
									that.getMerchOfflineMerchList(page)
								} else {
									that.getMerchCategoryList(page)
								}
								uni.hideLoading();
							},
							fail: function(err) {
								console.log(err)
								uni.showToast({
									title: '获取地址失败，将导致部分功能不可用',
									icon: 'none'
								});
							}
						})
				// #endif
				
				// #ifndef APP-PLUS || H5
				  console.log('不是app或h5');
					myAmapFun.getRegeo({
						success: function(data) {
							//成功回调
							console.log('当前定位', data);
							if (!that.addressName) {
								that.addressName = data[0].name
								that.mapData = {
									lat: data[0].latitude,
									lng: data[0].longitude
								}
							}
							if (that.merchCategoryList.length > 0) {
								that.getMerchOfflineMerchList(page)
							} else {
								that.getMerchCategoryList(page)
							}
							uni.hideLoading();
						},
						fail: function(info) {
							//失败回调
							console.log(info)
							uni.showToast({
								title: "获取位置失败，请重启小程序",
								icon: "error"
							})
						}
					})
				// #endif
			},
			// 跳转搜索店铺
			tosearchPage() {
				uni.navigateTo({
					url: '/pages/supplierPage/supplierSearch/supplierSearch'
				})
			},
			toMap() {
				uni.navigateTo({
					url: '/pages/map/map?location=' + JSON.stringify({
						...this.mapData,
						locationName: this.addressName
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>